<template>
	<d2-container>

    <template slot="header">
			<el-tabs v-model="activeName" @tab-click="handleClick" type="card" >
				<el-tab-pane label="退货入库" name="salesReturn"></el-tab-pane>
				<el-tab-pane label="调拨入库" name="allocation"></el-tab-pane>
				<!-- <el-tab-pane label="盘盈入库" name="surplus"></el-tab-pane> -->
			</el-tabs>
		</template>

    <template v-if="activeName=='salesReturn'">
    <template slot="header">
			<el-form ref="queryForm1" class="header-area" :model="queryForm1" label-width="100px" style="height: auto">
				<template>
					<el-row>
						<el-col :span="6">
							<el-form-item label="入库单编号" prop="stockInOrderNo">
								<el-input type="text" v-model="queryForm1.stockInOrderNo" placeholder="请输入入库单编号"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="6">
							<el-form-item label="销售订单号" prop="relatedOrderNo">
								<el-input type="text" v-model="queryForm1.relatedOrderNo" placeholder="请输入销售订单号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商品名称" prop="productName">
								<el-input type="text" v-model="queryForm1.productName" placeholder="请输入商品名称"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="6">
							<el-form-item label="商品编码" prop="productCode">
								<el-input type="text" v-model="queryForm1.productCode" placeholder="请输入商品编码"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row>
            <el-col :span="6">
							<el-form-item label="SKU名称" prop="skuName">
								<el-input type="text" v-model="queryForm1.skuName" placeholder="请输入SKU名称"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="6">
							<el-form-item label="SKU编码" prop="skuCode">
								<el-input type="text" v-model="queryForm1.skuCode" placeholder="请输入SKU编码"></el-input>
							</el-form-item>
						</el-col>
					<el-col :span="8">
						<el-form-item label="创建时间" prop="time1">
							<el-date-picker
									v-model="time1"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
									:default-time="['00:00:00', '23:59:59']"
									 style="width:100%"
								></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm1('queryForm1')">查询</el-button>
							<el-button size="medium" @click="resetForm1('queryForm1')">重置</el-button>
						</div>
					</el-col>
				</el-row>
				</template>
			</el-form>
		</template>
		<template>
			<el-table stripe border :data="tableData1" style="width: 100%">
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column prop="stockInOrderNo" label="入库单编号"></el-table-column>
				<el-table-column prop="relatedOrderNo" label="销售订单号"></el-table-column>
				<el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="productCode" label="商品编码"></el-table-column>
        <el-table-column prop="productSkuName" label="SKU名称"></el-table-column>
        <el-table-column prop="productSkuCode" label="SKU编码"></el-table-column>
        <el-table-column prop="shopName" label="门店名称"></el-table-column>
				<el-table-column prop="repositoryName" label="退入仓库"></el-table-column>
        <el-table-column prop="unitQuantity" label="商品数量"></el-table-column>
        <el-table-column prop="unitName" label="商品单位"></el-table-column>
        <el-table-column prop="unitRatio" label="转换系数"></el-table-column>
        <el-table-column prop="stockInQuantity" label="入库数量"></el-table-column>
        <el-table-column prop="stockInUnit" label="入库单位"></el-table-column>
				<el-table-column prop="stockInTime" label="入库时间" :formatter="forDateStockIn"></el-table-column>
			</el-table>
		</template>
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange1"
					@current-change="handleCurrentChange1"
					:current-page="currentPage1"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize1"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total1"
				></el-pagination>
			</div>
		</template>
    </template>

    <template v-if="activeName=='allocation'">
    <template slot="header">
			<el-form ref="queryForm2" class="header-area" :model="queryForm2" label-width="100px" style="height: auto">
				<template>
					<el-row>
						<el-col :span="6">
							<el-form-item label="入库单编号" prop="stockInOrderNo">
								<el-input type="text" v-model="queryForm2.stockInOrderNo" placeholder="请输入入库单编号"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="6">
							<el-form-item label="调拔单编号" prop="orderNo">
								<el-input type="text" v-model="queryForm2.orderNo" placeholder="请输入调拔单编号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="调入库存编码" prop="stockNoIn">
								<el-input type="text" v-model="queryForm2.stockNoIn" placeholder="请输入调入库存编码"></el-input>
							</el-form-item>	
						</el-col>
						<el-col :span="4">
							<el-form-item label="调入仓库" prop="repositoryNameIn">
								<el-input type="text" v-model="queryForm2.repositoryNameIn" placeholder="请输入调入仓库"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="调出仓库" prop="repositoryNameOut">
								<el-input type="text" v-model="queryForm2.repositoryNameOut" placeholder="请输入调出仓库"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row>
						<el-col :span="6">
							<el-form-item label="商品SPU" prop="productName">
								<el-input type="text" v-model="queryForm2.productName" placeholder="请输入商品SPU"></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="6">
							<el-form-item label="商品SKU" prop="productSkuName">
								<el-input type="text" v-model="queryForm2.productSkuName" placeholder="请输入商品SKU"></el-input>
							</el-form-item>
						</el-col>
					<el-col :span="8">
						<el-form-item label="入库时间" prop="time2">
							<el-date-picker
									v-model="time2"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
									:default-time="['00:00:00', '23:59:59']"
									 style="width:100%"
								></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm2('queryForm2')">查询</el-button>
							<el-button size="medium" @click="resetForm2('queryForm2')">重置</el-button>
						</div>
					</el-col>
				</el-row>
				</template>
			</el-form>
		</template>
		<template>
			<el-table stripe border :data="tableData2" style="width: 100%">
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column prop="stockInOrderNo" label="入库单编号"></el-table-column>
				<el-table-column prop="orderNo" label="调拔单编号"></el-table-column>
				<el-table-column prop="shopNameIn" label="调入店铺"></el-table-column>
				<el-table-column prop="repositoryNameIn" label="调入仓库"></el-table-column>
				<el-table-column prop="shopNameOut" label="调出店铺"></el-table-column>
				<el-table-column prop="repositoryNameOut" label="调出仓库"></el-table-column>
				<el-table-column prop="stockNoIn" label="调入库存编码"></el-table-column>
				<el-table-column prop="productName" label="商品SPU"></el-table-column>
        <el-table-column prop="productSkuName" label="商品SKU"></el-table-column>
        <el-table-column prop="productSkuCode" label="SKU编码"></el-table-column>
        <el-table-column prop="stockInQuantity" label="入库数量"></el-table-column>
        <el-table-column prop="stockInUnit" label="入库单位"></el-table-column>
				<el-table-column prop="stockInTime" label="入库时间" :formatter="forDateStockIn"></el-table-column>
        <el-table-column
            prop="auditStatus"
            label="审核状态" >
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus == 0">未提交</span>
              <span v-if="scope.row.auditStatus == 1">待审核</span>
              <span v-if="scope.row.auditStatus == 2">审核通过</span>
              <span v-if="scope.row.auditStatus == 3">审核不通过</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="allocationStatus"
            label="调拨状态" >
            <template slot-scope="scope">
              <span v-if="scope.row.allocationStatus == 0">未处理</span>
              <span v-if="scope.row.allocationStatus == 1">已确定</span>
              <span v-if="scope.row.allocationStatus == 2">已撤销</span>
            </template>
        </el-table-column>
			</el-table>
		</template>
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange2"
					@current-change="handleCurrentChange2"
					:current-page="currentPage2"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize2"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total2"
				></el-pagination>
			</div>
		</template>
    </template>

	</d2-container>
</template>

<script>
import { findSalesReturnStockInListByPage, findAllocationStockInListByPage } from '@api/stockIn/stockInOrder'
import dayjs from 'dayjs'

export default {
  name: 'stockIn-otherStockInList',
  data () {
    return {
      activeName: 'salesReturn',

      queryForm1: {
        stockInOrderNo: '',
        relatedOrderNo: '',
        productName: '',
        productCode: '',
        skuName: '',
        skuCode: '',
        startTime: '',
        endTime: ''
      },
      time1: [],
	    tableData1: [],
	    currentPage1: 1,
	    pageSize1: 10,
	    total1: 0,

      queryForm2: {
        stockInOrderNo: '',
        orderNo: '',
        stockNoIn: '',
        repositoryNameIn: '',
        repositoryNameOut: '',
        productName: '',
        productSkuName: '',
        timeBegin: '',
        timeEnd: ''
      },
      time2: [],
	    tableData2: [],
	    currentPage2: 1,
	    pageSize2: 10,
	    total2: 0,

      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },

  mounted () {
    this.fetchData1()
  },
  methods: {
    handleClick(tab, event) {
      let tabName=tab.name
			if(tabName=='salesReturn'){
				this.fetchData1()
			}
      if(tabName=='allocation'){
				this.fetchData2()
			}
    },
    fetchData1 () {
      this.loading = true
      this.queryForm1.startTime = this.time1[0] == null ? '' : dayjs(this.time1[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryForm1.endTime = this.time1[1] == null ? '' : dayjs(this.time1[1]).format('YYYY-MM-DD HH:mm:ss')
      findSalesReturnStockInListByPage({
        stockInOrderNo: this.queryForm1.stockInOrderNo,
        relatedOrderNo: this.queryForm1.relatedOrderNo,
        productName: this.queryForm1.productName,
        productCode: this.queryForm1.productCode,
        skuName: this.queryForm1.skuName,
        skuCode: this.queryForm1.skuCode,
        startTime: this.queryForm1.startTime,
        endTime: this.queryForm1.endTime,
        currentPage: this.currentPage1,
        pageSize: this.pageSize1
      })
        .then(res => {
          this.tableData1 = res.data.content
          this.total1 = res.data.total
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },
    handleSizeChange1 (val) {
      this.pageSize1 = val
      this.fetchData1()
    },
    handleCurrentChange1 (val) {
      this.currentPage1 = val
      this.fetchData1()
    },
    resetPage1 () {
      (this.currentPage1 = 1), (this.pageSize1 = 10), (this.total1 = 0)
    },
    resetForm1 (formName) {
      this.$refs[formName].resetFields()
      this.time1 = []
      this.resetPage1()
      this.fetchData1()
    }, 
    submitForm1 (formName) {
      this.resetPage1()
      this.fetchData1()
    },
    forDateStockIn (row, column) {
      return row.stockInTime == null ? '' : dayjs(row.stockInTime).format('YYYY-MM-DD HH:mm:ss')
    },

    
    fetchData2 () {
      this.loading = true
      this.queryForm2.timeBegin = this.time2[0] == null ? '' : dayjs(this.time2[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryForm2.timeEnd = this.time2[1] == null ? '' : dayjs(this.time2[1]).format('YYYY-MM-DD HH:mm:ss')
      findAllocationStockInListByPage({
        stockInOrderNo: this.queryForm2.stockInOrderNo,
        orderNo: this.queryForm2.orderNo,
        stockNoIn: this.queryForm2.stockNoIn,
        repositoryNameIn: this.queryForm2.repositoryNameIn,
        repositoryNameOut: this.queryForm2.repositoryNameOut,
        productName: this.queryForm2.productName,
        productSkuName: this.queryForm2.productSkuName,
        timeBegin: this.queryForm2.timeBegin,
        timeEnd: this.queryForm2.timeEnd,
        currentPage: this.currentPage2,
        pageSize: this.pageSize2
      })
        .then(res => {
          this.tableData2 = res.data.content
          this.total2 = res.data.total
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },
    handleSizeChange2 (val) {
      this.pageSize2 = val
      this.fetchData2()
    },
    handleCurrentChange2 (val) {
      this.currentPage2 = val
      this.fetchData2()
    },
    resetPage2 () {
      (this.currentPage2 = 1), (this.pageSize2 = 10), (this.total2 = 0)
    },
    resetForm2 (formName) {
      this.$refs[formName].resetFields()
      this.time2 = []
      this.resetPage2()
      this.fetchData2()
    }, 
    submitForm2 (formName) {
      this.resetPage2()
      this.fetchData2()
    },

  }
}
</script>